<template>
  <BasicModal v-bind="$attrs" destroyOnClose title="预约详情" :width="modalWidth" :footer="null" @register="registerModal">
    <Description class="mt-4" title="基本信息" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" :data="appointmentInfo.data" :schema="appointmentInfoSchema" />
    <BasicTable @register="registerOrderDetailTable"></BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@apps/antd-admin/src/components/modal';
import { DescItem, Description } from '@apps/antd-admin/src/components/description';
import { BasicColumn, BasicTable, useTable } from '@apps/antd-admin/src/components/table';
import { getAppointmentInfo } from '../data/api';
import { render } from '@apps/antd-admin/src/hooks/render/renderUtils';
import { useAppInject } from '@apps/antd-admin/src/hooks/web/use-app-inject';
const { getIsMobile } = useAppInject();
const modalWidth = ref('750px');
if (unref(getIsMobile)) {
  modalWidth.value = '80%';
}
let appointmentInfo: Recordable = reactive({ data: {} });
const appointmentInfoSchema: DescItem[] = [
  {
    field: 'coverImg',
    label: '贵宾厅',
    span: 3,
    render: (curVal, data) => {
      return render.renderImage({ text: curVal });
    },
  },
  {
    field: 'goodsName',
    label: '贵宾厅名称',
    span: 3,
  },
  {
    field: 'appointmentState',
    label: '预约状态',
    span: 3,
    render: (curVal, data) => {
      const appointmentStateArray = [
        { label: '等待预约', value: 1 },
        { label: '预约成功', value: 2 },
        { label: '预约失败', value: 3 },
      ];
      const appointmentState: any = appointmentStateArray.find((item) => item.value == curVal);
      if (appointmentState) {
        return appointmentState.label;
      }
      return '';
    },
  },
  {
    field: 'businessTime',
    label: '营业时间',
    span: 3,
  },
  {
    field: 'flightNumber',
    label: '航班号',
    span: 3,
  },
  {
    field: 'flightDate',
    label: '航班日期',
    span: 3,
  },
  {
    field: 'takeOffTime',
    label: '起飞时间',
    span: 3,
  },
  {
    field: 'userName',
    label: '会员姓名',
    span: 3,
  },
  {
    field: 'phone',
    label: '会员电话',
    span: 3,
  },
  {
    field: 'identityType',
    label: '证件类型',
    span: 3,
    render: (curVal, data) => {
      const identityTypeArray = [
        { label: '身份证', value: 1 },
        { label: '护照', value: 2 },
        { label: '港澳通行证', value: 3 },
        { label: '台胞证', value: 4 },
      ];
      const identityType: any = identityTypeArray.find((item) => item.value == curVal);
      if (identityType) {
        return identityType.label;
      }
      return '';
    },
  },
  {
    field: 'identityNo',
    label: '证件号',
    span: 3,
  },
  {
    field: 'createTime',
    label: '提交时间',
    span: 3,
  },
];

const appointmentTableSchema: BasicColumn[] = [
  {
    title: '同行人姓名',
    width: 150,
    dataIndex: 'userName',
  },
  {
    title: '证件类型',
    width: 150,
    dataIndex: 'identityType',
    customRender: ({ record }: Recordable) => {
      const identityTypeArray = [
        { label: '身份证', value: 1 },
        { label: '护照', value: 2 },
        { label: '港澳通行证', value: 3 },
        { label: '台胞证', value: 4 },
      ];
      const identityType: any = identityTypeArray.find((item) => item.value == record.identityType);
      if (identityType) {
        return identityType.label;
      }
      return '';
    },
  },
  {
    title: '证件号',
    width: 150,
    dataIndex: 'identityNo',
  },
];
const [registerOrderDetailTable, { setTableData }] = useTable({
  title: '同行人员',
  columns: appointmentTableSchema,
  pagination: false,
  showIndexColumn: false,
  scroll: { y: 300 },
  showSummary: false,
});
//详情赋值
const [registerModal] = useModalInner(async (data) => {
  let record = data.record;
  let appointmentId = record.appointmentId;
  getAppointmentInfo({
    appointmentId: appointmentId,
    handlerName: 'busAppointmentGetHandler',
  }).then((result) => {
    console.info(result);
    appointmentInfo.data = result;
    setTableData(result.peerstaffList);
  });
});
</script>
